import '../../../styles/shouye.scss'
import React,{useEffect,useState} from 'react';
import type { ColumnsType } from 'antd/es/table';
import pic1 from '../../images/1.png'
import {realregister_list,hotoffice_list,hotdoctor_list,data_list} from '../../../utils/api'
import axios from 'axios'
import { RiseOutlined} from '@ant-design/icons';
import BarChart from '../../../component/shouye/BarChart'
import LineChart from '../../../component/shouye/LineChart'
import MyTable from '../../../component/shouye/Mytable'
import FormList from 'antd/es/form/FormList';
import Mychart from '../../../component/shouye/Mychart'
interface Props{

}
interface DataType1{
    head: string;
    name: string;
    number: string;
    office: string;
    fee: string;
    time: string,
}
interface DataType2{
    rankname: string;
    office: string;
    num: string;
}
interface DataType3{
    rankname: string;
    name: string;
    num: string;
}
function Home(props:Props) {
    var [datalist,setDatalist] = useState([])
    // 获取挂号列表
    var [formlist1, setFormonelist] = useState([])
    var [formlist2, setFormtwolist] = useState([])
    var [formlist3, setFormthreelist] = useState([])
    //决定了每一列渲染什么数据
    const columns1: ColumnsType<DataType1> = [
        {
            title: '医生头像',
            dataIndex: 'head',
            render: (record) => (
                <>
                    <img src={record} alt="" style={{ width: 20, height: 20 }} />
                </>
            )
        },
        {
            title: '患者姓名', 
            dataIndex: 'name', 
        },
        {
            title: '患者手机号码',
            dataIndex: 'number',
        },
        {
            title: '挂号科室',
            dataIndex: 'office'
        },
        {
            title: '挂号费',
            dataIndex: 'fee',
        },
        {
            title: '挂号时间',
            dataIndex: 'time',
        },
    ];
    const columns2: ColumnsType<DataType2> = [
        {
            title: '排名',
            dataIndex: 'rankname',
            render: (record) => (
                <>
                    <img src={record} alt="" style={{ width: 20, height: 20 }} />
                </>
            )
        },
        {
            title: '科室', 
            dataIndex: 'office', 
        },
        {
            title: '挂号量',
            dataIndex: 'num',
        },
    ];
    const columns3: ColumnsType<DataType3> = [
        {
            title: '排名',
            dataIndex: 'rankname',
            render: (record) => (
                <>
                    <img src={record} alt="" style={{ width: 20, height: 20 }} />
                </>
            )
        },
        {
            title: '患者姓名', 
            dataIndex: 'name', 
        },
        {
            title: '挂号量',
            dataIndex: 'num',
        },
    ];
    useEffect(()=>{
        data_list().then((res)=>{
            setDatalist(res.data)
        })
        // axios.get('/postsglltwo').then((res)=>{
        //     // console.log(res.data);
        // })
        realregister_list().then((res)=>{
            setFormonelist(res.data)
        })
        hotoffice_list().then((res)=>{
            setFormtwolist(res.data)
        })
        hotdoctor_list().then((res)=>{
            setFormthreelist(res.data)
        })
    },[])
    return (
        <div className="shouye">
            <div className="title">
                <span></span>
                <h2>首页</h2>
            </div>
            <h3>数据总览</h3>
            <div className="data">
                {
                    datalist.map((item:any,index)=>{
                        return (
                        <div className='data_box' key={index}>
                            <div className="left">
                                <img src={item.img}/>
                            </div>
                            <div className="right">
                                <div className='number'>
                                    <h6>{item.number}</h6>
                                    <RiseOutlined />
                                </div>
                                <p>{item.value}</p>
                            </div>
                        </div>
                        )
                    })
                }    
            </div>
            <div className="chart">
                <div className="barchart" >
                    <BarChart />
                </div>
                <div className="linechart">
                    <LineChart />
                    {/* <Mychart /> */}
                </div>
            </div>
            <div className="hospital">
                <div className="guahao">
                    <h3>实时挂号</h3>
                    <MyTable header={columns1} formlist={formlist1}></MyTable>
                </div>
                <div className="hot">
                    <div className="office">
                        <h3>热门科室</h3>
                        <MyTable header={columns2} formlist={formlist2}></MyTable>
                    </div>
                    <div className="doctor">
                        <h3>热门医生</h3>
                        <MyTable header={columns3} formlist={formlist3}></MyTable>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Home;